<template>
    <div class="banner" v-if="isPlayIcon" @click="changeAudioId(bannerData)">
        <img class="auto-img" v-lazy="bannerData.pic" />
    </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
    name: "Banner",
    props: {
        bannerData: {
            type: Object,
            default() {
                return {}
            }
        },
        //控制播放图标的显示和隐藏
        isPlayIcon: {
            type: Boolean,
            default: false
        },
    },

    created() {
        //   
    },
    computed: {
        ...mapState(['currentAudioInfo', '$audio', 'isPlay'])
    },
    methods: {

        ...mapMutations(['setAudioId']),

        //修改音频id
        changeAudioId() {

              

           
            //判断当前音频的id是否和点击播放的音频id一致
            if(this.bannerData.song!=null){
                if (this.currentAudioInfo.audioId === this.bannerData.song.al.id) {
                    //   
                  

                if (this.isPlay) {
                    //暂停音频
                    this.$audio.pause();
                } else {
                    //播放音频
                    this.$audio.play();
                }

            } else {
                //设置新的音频id
                //vuex, 修改音频id
                //   
                if (this.bannerData.song != null) {
                    this.setAudioId({
                        audioId: this.bannerData.song.al.id,
                        singerName: this.bannerData.song.ar[0].name,
                        songName: this.bannerData.song.al.name,
                        singerPic: this.bannerData.song.al.picUrl
                    });
                }

            }
            }
            

        },
    }

}
</script>

<style lang="less" scoped>
.banner{
    height: 130px;
}

    /deep/.banner img {
        width: 100%;
        height: 100%;
    }
</style>